<template>
  <view class="profile-card">
    <!-- 骨架屏 -->
    <view v-if="loading" class="skeleton-container">
      <!-- 头部骨架屏 -->
      <view class="skeleton-header">
        <view class="skeleton-bg"></view>
        <view class="skeleton-info">
          <view class="skeleton-avatar"></view>
          <view class="skeleton-name"></view>
          <view class="skeleton-role"></view>
          <view class="skeleton-contact">
            <view class="skeleton-contact-item"></view>
            <view class="skeleton-contact-item"></view>
          </view>
        </view>
      </view>

      <!-- 基本信息骨架屏 -->
      <view class="skeleton-section">
        <view class="skeleton-title"></view>
        <view class="skeleton-info-list">
          <view v-for="i in 6" :key="i" class="skeleton-info-item">
            <view class="skeleton-label"></view>
            <view class="skeleton-value"></view>
          </view>
        </view>
      </view>

      <!-- 工作履历骨架屏 -->
      <view class="skeleton-section">
        <view class="skeleton-title"></view>
        <view class="skeleton-timeline">
          <view v-for="i in 2" :key="i" class="skeleton-timeline-item">
            <view class="skeleton-timeline-dot"></view>
            <view class="skeleton-timeline-content">
              <view class="skeleton-timeline-title"></view>
              <view class="skeleton-timeline-position"></view>
              <view class="skeleton-timeline-time"></view>
              <view class="skeleton-timeline-desc"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 家族贡献骨架屏 -->
      <view class="skeleton-section">
        <view class="skeleton-title"></view>
        <view class="skeleton-contribution-list">
          <view v-for="i in 2" :key="i" class="skeleton-contribution-item">
            <view class="skeleton-contribution-year"></view>
            <view class="skeleton-contribution-content">
              <view class="skeleton-contribution-title"></view>
              <view class="skeleton-contribution-desc"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部按钮骨架屏 -->
      <view class="skeleton-action-buttons">
        <view class="skeleton-btn"></view>
        <view class="skeleton-btn"></view>
      </view>
    </view>

    <!-- 实际内容 -->
    <view v-else>
      <view class="card-header">
        <image class="card-bg" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="card-info">
          <image class="card-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
          <view class="card-name">{{ userInfo.name }}</view>
          <view v-if="userInfo.role" class="card-role">{{ userInfo.role }}</view>
          <view class="card-contact">
            <view v-if="userInfo.phone" class="contact-item">
              <wd-icon name="phone" size="28rpx" color="#ffffff"></wd-icon>
              <text>{{ maskPhoneNumber(userInfo.phone) }}</text>
            </view>
            <view v-if="userInfo.email" class="contact-item">
              <wd-icon name="email" size="28rpx" color="#ffffff"></wd-icon>
              <text>{{ userInfo.email }}</text>
            </view>
          </view>
        </view>
      </view>

      <view v-if="showBasicInfo" class="card-section">
        <view class="section-title">基本信息</view>
        <view class="info-list">
          <view v-if="userInfo.birthday" class="info-item">
            <text class="item-label">出生日期</text>
            <text class="item-value">{{ userInfo.birthday }}</text>
          </view>
          <view v-if="userInfo.gender" class="info-item">
            <text class="item-label">性别</text>
            <text class="item-value">{{ userInfo.gender }}</text>
          </view>
          <view v-if="userInfo.hometown" class="info-item">
            <text class="item-label">籍贯</text>
            <text class="item-value">{{ userInfo.hometown }}</text>
          </view>
          <view v-if="userInfo.address" class="info-item">
            <text class="item-label">现居地</text>
            <text class="item-value">{{ userInfo.address }}</text>
          </view>
          <view v-if="userInfo.education" class="info-item">
            <text class="item-label">教育背景</text>
            <text class="item-value">{{ userInfo.education }}</text>
          </view>
          <view v-if="userInfo.ethnicity" class="info-item">
            <text class="item-label">民族</text>
            <text class="item-value">{{ userInfo.ethnicity }}</text>
          </view>
          <view v-if="userInfo.politicalStatus" class="info-item">
            <text class="item-label">政治面貌</text>
            <text class="item-value">{{ userInfo.politicalStatus }}</text>
          </view>
          <view v-if="userInfo.role && isClanMember" class="info-item">
            <text class="item-label">宗亲会职务</text>
            <text class="item-value">{{ userInfo.role }}</text>
          </view>
          <view v-if="userInfo.joinTime && isClanMember" class="info-item">
            <text class="item-label">入会时间</text>
            <text class="item-value">{{ userInfo.joinTime }}</text>
          </view>
          <view v-if="userInfo.company" class="info-item">
            <text class="item-label">公司</text>
            <text class="item-value">{{ userInfo.company }}</text>
          </view>
          <view v-if="userInfo.role" class="info-item">
            <text class="item-label">职位</text>
            <text class="item-value">{{ userInfo.role }}</text>
          </view>
          <view v-if="userInfo.businessScope" class="info-item">
            <text class="item-label">经营范围</text>
            <text class="item-value">{{ userInfo.businessScope }}</text>
          </view>
          <view v-if="userInfo.registeredCapital" class="info-item">
            <text class="item-label">注册资本</text>
            <text class="item-value">{{ userInfo.registeredCapital }}元</text>
          </view>
          <view v-if="userInfo.specialty" class="info-item">
            <text class="item-label">专长</text>
            <text class="item-value">{{ userInfo.specialty }}</text>
          </view>
          <view v-if="userInfo.remarks" class="info-item">
            <text class="item-label">备注</text>
            <text class="item-value">{{ userInfo.remarks }}</text>
          </view>
        </view>
      </view>

      <view v-if="userInfo.career && userInfo.career.length > 0" class="card-section">
        <view class="section-title">工作履历</view>
        <view class="timeline">
          <view v-for="(item, index) in userInfo.career" :key="index" class="timeline-item">
            <view class="timeline-dot"></view>
            <view class="timeline-content">
              <view class="timeline-title">{{ item.company }}</view>
              <view class="timeline-position">{{ item.role }}</view>
              <view class="timeline-time">{{ item.time }}</view>
              <view class="timeline-desc">{{ item.description }}</view>
            </view>
          </view>
        </view>
      </view>

      <view
        v-if="userInfo.contributions && userInfo.contributions.length > 0 && isClanMember"
        class="card-section"
      >
        <view class="section-title">家族贡献</view>
        <view class="contribution-list">
          <view
            v-for="(item, index) in userInfo.contributions"
            :key="index"
            class="contribution-item"
          >
            <view class="contribution-year">{{ item.year }}</view>
            <view class="contribution-content">
              <view class="contribution-title">{{ item.title }}</view>
              <view class="contribution-desc">{{ item.desc }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="action-buttons">
        <button v-if="userInfo.phone" class="btn btn-contact" @click="contactUser">联系Ta</button>
        <button class="btn btn-message" @click="sendMessage">发送消息</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import ClanMember from "@/api/genealogy/clanMember";

// 格式化日期函数
const formatDate = (dateString: string) => {
  if (!dateString) return "";
  const date = new Date(dateString);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
};

// 获取用户ID
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  showBasicInfo: {
    type: Boolean,
    default: true,
  },
  source: {
    type: String,
    default: "", // 可选值: 'clan'(宗亲会)，'family'(家族成员)，'user'(普通用户)
  },
});

// 计算是否为宗亲会成员
const isClanMember = computed(() => {
  return props.source === "clan";
});

// 用户信息数据
const userInfo = ref({
  id: "",
  name: "",
  role: "",
  avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
  phone: "",
  email: "",
  birthday: "",
  hometown: "",
  address: "",
  joinTime: "",
  company: "",
  position: "",
  career: [] as any[],
  contributions: [] as any[],
  // 新增字段
  gender: "",
  education: "",
  ethnicity: "",
  politicalStatus: "",
  idCard: "",
  businessScope: "",
  registeredCapital: "",
  memberType: "",
  clanAssociationId: "",
  specialty: "",
  remarks: "",
});

// 加载状态
const loading = ref(true);

// 页面加载时获取数据
onMounted(() => {
  if (props.id) {
    fetchUserInfo(props.id);
  }
});

// 获取用户信息
const fetchUserInfo = async (userId: string) => {
  loading.value = true; // 开始加载
  // 这里应该根据id从API获取用户详情数据
  // 根据不同的source获取不同类型的数据

  if (props.source === "clan") {
    // 获取宗亲会成员信息
    await getClanMemberInfo(userId);
  } else if (props.source === "family") {
    // 获取家族成员信息
    await getFamilyMemberInfo(userId);
  } else {
    // 获取普通用户信息
    await getGeneralUserInfo(userId);
  }
  loading.value = false; // 结束加载
};

// 获取宗亲会成员信息
const getClanMemberInfo = async (userId: string) => {
  try {
    // 调用API获取宗亲会成员详情
    const response = await ClanMember.getClanPersonInfo(userId);
    // 检查响应数据
    if (response) {
      const memberData = response as any;

      // 更新用户信息，根据实际API字段进行映射
      userInfo.value = {
        id: memberData.id || userId,
        name: memberData.name || "未知",
        role: memberData.companyPosition,
        avatar: memberData.photoUrl || "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
        phone: memberData.phone || "",
        email: memberData.email || "",
        birthday: memberData.birthDate ? formatDate(memberData.birthDate) : "",
        hometown: memberData.nativePlace || "",
        address: memberData.address || memberData.companyAddress || "",
        joinTime: memberData.joinDate
          ? formatDate(memberData.joinDate)
          : memberData.createTime
            ? formatDate(memberData.createTime)
            : "",
        company: memberData.companyName || "",
        position: memberData.position || memberData.companyPosition || "",
        career: [
          {
            company: memberData.companyName || "",
            position: memberData.position || memberData.companyPosition || "",
            time: memberData.createTime ? formatDate(memberData.createTime) : "",
            description: `教育背景：${memberData.education || ""} | 政治面貌：${memberData.politicalStatus || ""} | 民族：${memberData.ethnicity || ""} | 经营范围：${memberData.businessScope || ""} | 注册资本：${memberData.registeredCapital ? memberData.registeredCapital + "元" : ""}`,
          },
        ],
        contributions: memberData.contributions || [],
        // 新增字段
        gender: memberData.gender || "",
        education: memberData.education || "",
        ethnicity: memberData.ethnicity || "",
        politicalStatus: memberData.politicalStatus || "",
        idCard: memberData.idCard || "",
        businessScope: memberData.businessScope || "",
        registeredCapital: memberData.registeredCapital || "",
        memberType: memberData.memberType || "",
        clanAssociationId: memberData.clanAssociationId || "",
        specialty: memberData.specialty || "",
        remarks: memberData.remarks || "",
      };

      // 添加更多详细信息到userInfo中
      // 可以扩展userInfo类型来包含更多字段
      console.log("处理后的用户信息:", userInfo.value);
    } else {
      // 如果API返回空数据，显示默认信息
      userInfo.value = {
        id: userId,
        name: "未知成员",
        role: "",
        avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
        phone: "",
        email: "",
        birthday: "",
        hometown: "",
        address: "",
        joinTime: "",
        company: "",
        position: "",
        career: [],
        contributions: [],
        // 新增字段
        gender: "",
        education: "",
        ethnicity: "",
        politicalStatus: "",
        idCard: "",
        businessScope: "",
        registeredCapital: "",
        memberType: "",
        clanAssociationId: "",
        specialty: "",
        remarks: "",
      };

      uni.showToast({
        title: "获取成员信息失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("获取宗亲会成员信息失败:", error);

    // 显示错误提示
    uni.showToast({
      title: "获取成员信息失败",
      icon: "none",
    });

    // 设置默认数据
    userInfo.value = {
      id: userId,
      name: "未知成员",
      role: "",
      avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
      phone: "",
      email: "",
      birthday: "",
      hometown: "",
      address: "",
      joinTime: "",
      company: "",
      position: "",
      career: [],
      contributions: [],
      // 新增字段
      gender: "",
      education: "",
      ethnicity: "",
      politicalStatus: "",
      idCard: "",
      businessScope: "",
      registeredCapital: "",
      memberType: "",
      clanAssociationId: "",
      specialty: "",
      remarks: "",
    };
  }
};

// 获取家族成员信息
const getFamilyMemberInfo = async (userId: string) => {
  try {
    // 这里应该调用API获取家族成员信息
    // 暂时使用模拟数据，后续可以替换为真实的API调用
    const response = await ClanMember.getClanPersonInfo(userId);

    if (response && typeof response === "object" && "data" in response) {
      const memberData = (response as any).data;

      console.log("memberData", memberData);
      userInfo.value = {
        id: memberData.id || userId,
        name: memberData.name || "未知",
        role: "家族成员",
        avatar: memberData.photoUrl || "/static/avatar/default.png",
        phone: memberData.phone || "",
        email: memberData.email || "",
        birthday: memberData.birthDate ? formatDate(memberData.birthDate) : "",
        hometown: memberData.nativePlace || "",
        address: memberData.address || memberData.companyAddress || "",
        joinTime: memberData.joinDate
          ? formatDate(memberData.joinDate)
          : memberData.createTime
            ? formatDate(memberData.createTime)
            : "",
        company: memberData.companyName || "",
        position: memberData.position || memberData.companyPosition || "",
        career: memberData.career || [],
        contributions: memberData.contributions || [],
        // 新增字段
        gender: memberData.gender || "",
        education: memberData.education || "",
        ethnicity: memberData.ethnicity || "",
        politicalStatus: memberData.politicalStatus || "",
        idCard: memberData.idCard || "",
        businessScope: memberData.businessScope || "",
        registeredCapital: memberData.registeredCapital || "",
        memberType: memberData.memberType || "",
        clanAssociationId: memberData.clanAssociationId || "",
        specialty: memberData.specialty || "",
        remarks: memberData.remarks || "",
      };
    } else {
      // 默认数据
      userInfo.value = {
        id: userId,
        name: "未知成员",
        role: "家族成员",
        avatar: "/static/avatar/default.png",
        phone: "",
        email: "",
        birthday: "",
        hometown: "",
        address: "",
        joinTime: "",
        company: "",
        position: "",
        career: [],
        contributions: [],
        // 新增字段
        gender: "",
        education: "",
        ethnicity: "",
        politicalStatus: "",
        idCard: "",
        businessScope: "",
        registeredCapital: "",
        memberType: "",
        clanAssociationId: "",
        specialty: "",
        remarks: "",
      };
    }
  } catch (error) {
    console.error("获取家族成员信息失败:", error);

    // 默认数据
    userInfo.value = {
      id: userId,
      name: "未知成员",
      role: "家族成员",
      avatar: "/static/avatar/default.png",
      phone: "",
      email: "",
      birthday: "",
      hometown: "",
      address: "",
      joinTime: "",
      company: "",
      position: "",
      career: [],
      contributions: [],
      // 新增字段
      gender: "",
      education: "",
      ethnicity: "",
      politicalStatus: "",
      idCard: "",
      businessScope: "",
      registeredCapital: "",
      memberType: "",
      clanAssociationId: "",
      specialty: "",
      remarks: "",
    };
  }
};

// 获取普通用户信息
const getGeneralUserInfo = async (userId: string) => {
  try {
    // 这里应该调用API获取普通用户信息
    // 暂时使用模拟数据，后续可以替换为真实的API调用
    const response = await ClanMember.getClanPersonInfo(userId);

    if (response && typeof response === "object" && "data" in response) {
      const memberData = (response as any).data;

      userInfo.value = {
        id: memberData.id || userId,
        name: memberData.name || "未知",
        role: "",
        avatar: memberData.photoUrl || "/static/avatar/default.png",
        phone: memberData.phone || "",
        email: memberData.email || "",
        birthday: memberData.birthDate ? formatDate(memberData.birthDate) : "",
        hometown: memberData.nativePlace || "",
        address: memberData.address || memberData.companyAddress || "",
        joinTime: memberData.joinDate
          ? formatDate(memberData.joinDate)
          : memberData.createTime
            ? formatDate(memberData.createTime)
            : "",
        company: memberData.companyName || "",
        position: memberData.position || memberData.companyPosition || "",
        career: memberData.career || [],
        contributions: memberData.contributions || [],
        // 新增字段
        gender: memberData.gender || "",
        education: memberData.education || "",
        ethnicity: memberData.ethnicity || "",
        politicalStatus: memberData.politicalStatus || "",
        idCard: memberData.idCard || "",
        businessScope: memberData.businessScope || "",
        registeredCapital: memberData.registeredCapital || "",
        memberType: memberData.memberType || "",
        clanAssociationId: memberData.clanAssociationId || "",
        specialty: memberData.specialty || "",
        remarks: memberData.remarks || "",
      };
    } else {
      // 默认数据
      userInfo.value = {
        id: userId,
        name: "未知用户",
        role: "",
        avatar: "/static/avatar/default.png",
        phone: "",
        email: "",
        birthday: "",
        hometown: "",
        address: "",
        joinTime: "",
        company: "",
        position: "",
        career: [],
        contributions: [],
        // 新增字段
        gender: "",
        education: "",
        ethnicity: "",
        politicalStatus: "",
        idCard: "",
        businessScope: "",
        registeredCapital: "",
        memberType: "",
        clanAssociationId: "",
        specialty: "",
        remarks: "",
      };
    }
  } catch (error) {
    console.error("获取普通用户信息失败:", error);

    // 默认数据
    userInfo.value = {
      id: userId,
      name: "未知用户",
      role: "",
      avatar: "/static/avatar/default.png",
      phone: "",
      email: "",
      birthday: "",
      hometown: "",
      address: "",
      joinTime: "",
      company: "",
      position: "",
      career: [],
      contributions: [],
      // 新增字段
      gender: "",
      education: "",
      ethnicity: "",
      politicalStatus: "",
      idCard: "",
      businessScope: "",
      registeredCapital: "",
      memberType: "",
      clanAssociationId: "",
      specialty: "",
      remarks: "",
    };
  }
};

// 联系用户
const contactUser = () => {
  if (userInfo.value.phone) {
    // 提取电话号码中的数字
    const phoneNumber = userInfo.value.phone.replace(/[^\d]/g, "");
    if (phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber,
        fail: () => {
          uni.showToast({
            title: "拨打失败，请手动拨打",
            icon: "none",
          });
        },
      });
    } else {
      uni.showToast({
        title: "无效的电话号码",
        icon: "none",
      });
    }
  }
};
// 手机号中间显示星号
const maskPhoneNumber = (phoneNumber: string) => {
  if (!phoneNumber) return phoneNumber;
  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
};

// 发送消息
const sendMessage = () => {
  uni.navigateTo({
    url: `/pages/chat/conversation?userId=${userInfo.value.id}&userName=${userInfo.value.name}`,
  });
};
</script>

<style lang="scss">
.profile-card {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.card-header {
  position: relative;
  height: 500rpx;
  overflow: hidden;
}

.card-bg {
  width: 100%;
  height: 100%;
  filter: blur(2px);
}

.card-info {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  z-index: 2;
  text-align: center;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
  }

  .card-avatar {
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
    background-color: #f5f5f5;
  }

  .card-name {
    font-size: 40rpx;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  }

  .card-role {
    font-size: 28rpx;
    color: #fff;
    background-color: rgba(64, 158, 255, 0.8);
    padding: 6rpx 30rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
  }

  .card-contact {
    display: flex;
    justify-content: center;
    margin-top: 10rpx;
    margin-bottom: 30rpx;

    .contact-item {
      display: flex;
      align-items: center;
      color: #fff;
      margin: 0 20rpx;
      font-size: 26rpx;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 30rpx;
      padding: 8rpx 20rpx;

      text {
        margin-left: 10rpx;
      }
    }
  }
}

.card-section {
  background-color: #fff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f0f0f0;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1rpx;
      width: 60rpx;
      height: 4rpx;
      background-color: #1989fa;
      border-radius: 2rpx;
    }
  }
}

.info-list {
  .info-item {
    display: flex;
    padding: 16rpx 0;

    &:not(:last-child) {
      border-bottom: 1rpx solid #f5f5f5;
    }

    .item-label {
      width: 160rpx;
      color: #666;
      font-size: 28rpx;
    }

    .item-value {
      flex: 1;
      color: #333;
      font-size: 28rpx;
    }
  }
}

.timeline {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 10rpx;
    top: 10rpx;
    bottom: 20rpx;
    width: 2rpx;
    background-color: #ddd;
  }

  .timeline-item {
    position: relative;
    padding-left: 40rpx;
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .timeline-dot {
    position: absolute;
    left: 0;
    top: 16rpx;
    width: 20rpx;
    height: 20rpx;
    background-color: #1989fa;
    border-radius: 50%;
    border: 2rpx solid #fff;
    z-index: 1;
  }

  .timeline-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
  }

  .timeline-position {
    font-size: 26rpx;
    color: #1989fa;
    margin-bottom: 6rpx;
  }

  .timeline-time {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 8rpx;
  }

  .timeline-desc {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
  }
}

.contribution-list {
  .contribution-item {
    display: flex;
    margin-bottom: 24rpx;
    padding-bottom: 24rpx;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .contribution-year {
      width: 100rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #1989fa;
    }

    .contribution-content {
      flex: 1;

      .contribution-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }

      .contribution-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}

.action-buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 10;

  .btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    border-radius: 40rpx;
    margin: 0 10rpx;
  }

  .btn-contact {
    background-color: #fff;
    color: #1989fa;
    border: 2rpx solid #1989fa;
  }

  .btn-message {
    background-color: #1989fa;
    color: #fff;
  }
}

/* 骨架屏样式 */
.skeleton-container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.skeleton-header {
  position: relative;
  height: 200rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  border-radius: 12rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.skeleton-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e0e0e0;
  background-size: cover;
  background-position: center;
  filter: blur(2px);
}

.skeleton-info {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  z-index: 2;
  text-align: center;
}

.skeleton-avatar {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  margin-bottom: 20rpx;
}

.skeleton-name {
  width: 80%;
  height: 40rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  margin-bottom: 10rpx;
  border-radius: 8rpx;
}

.skeleton-role {
  width: 150rpx;
  height: 40rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  margin-bottom: 20rpx;
  border-radius: 30rpx;
}

.skeleton-contact {
  display: flex;
  justify-content: center;
  margin-top: 10rpx;
  margin-bottom: 30rpx;
}

.skeleton-contact-item {
  width: 120rpx;
  height: 40rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  margin: 0 20rpx;
  border-radius: 30rpx;
}

.skeleton-section {
  background-color: #fff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
}

.skeleton-title {
  width: 200rpx;
  height: 40rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  margin-bottom: 24rpx;
  border-radius: 8rpx;
}

.skeleton-info-list {
  .skeleton-info-item {
    display: flex;
    padding: 16rpx 0;
    margin-bottom: 16rpx;
  }

  .skeleton-label {
    width: 160rpx;
    height: 28rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }

  .skeleton-value {
    flex: 1;
    height: 28rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8rpx;
  }
}

.skeleton-timeline {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 10rpx;
    top: 10rpx;
    bottom: 20rpx;
    width: 2rpx;
    background-color: #ddd;
  }

  .skeleton-timeline-item {
    position: relative;
    padding-left: 40rpx;
    margin-bottom: 30rpx;
  }

  .skeleton-timeline-dot {
    position: absolute;
    left: 0;
    top: 16rpx;
    width: 20rpx;
    height: 20rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 50%;
    border: 2rpx solid #fff;
    z-index: 1;
  }

  .skeleton-timeline-content {
    display: flex;
    flex-direction: column;
  }

  .skeleton-timeline-title {
    width: 80%;
    height: 30rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    margin-bottom: 8rpx;
    border-radius: 8rpx;
  }

  .skeleton-timeline-position {
    width: 60%;
    height: 26rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    margin-bottom: 6rpx;
    border-radius: 8rpx;
  }

  .skeleton-timeline-time {
    width: 50%;
    height: 24rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    margin-bottom: 8rpx;
    border-radius: 8rpx;
  }

  .skeleton-timeline-desc {
    width: 90%;
    height: 26rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8rpx;
  }
}

.skeleton-contribution-list {
  .skeleton-contribution-item {
    display: flex;
    margin-bottom: 24rpx;
    padding-bottom: 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .skeleton-contribution-year {
    width: 100rpx;
    height: 28rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }

  .skeleton-contribution-content {
    flex: 1;
  }

  .skeleton-contribution-title {
    width: 80%;
    height: 28rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    margin-bottom: 10rpx;
    border-radius: 8rpx;
  }

  .skeleton-contribution-desc {
    width: 90%;
    height: 26rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8rpx;
  }
}

.skeleton-action-buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.skeleton-btn {
  flex: 1;
  height: 80rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 40rpx;
  margin: 0 10rpx;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}
</style>
